<?php require_once VIEWPATH.'Common/header.php'; ?>
<!-- header -->
<link rel="stylesheet" href="<?=STATICURL?>css/other/animate.css?v=<?=$version?>">
<link rel="stylesheet" href="<?=STATICURL?>css/other/animatedresponsiveImagegrid.css?v=<?=$version?>">
<link rel="stylesheet" href="<?=STATICURL?>css/other/magnific-popup.css?v=<?=$version?>">
<link rel="stylesheet" href="<?=STATICURL?>css/other/style.css?v=<?=$version?>">
<script src="<?=STATICURL?>js/other/modernizr-2.6.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?=STATICURL?>css/banner.css?v=<?=$version?>">
<?php require_once VIEWPATH.'Common/menu.php'; ?>
<div class="index_banner">
	<div class="ban" id="ban">
		<div class="ban_l" id="ban_l">
			<div class="ban_pic ban_pic_l move-con" >
				<?php if($bannerList_Left):?>
					<?php foreach ($bannerList_Left as $key => $value): ?>
						<div class="move-li" ><img src="<?=UPLOADURL.$value['banner_img']?>"></div>
					<?php endforeach;?>
				<?php endif;?>
			</div>
			<div class="ban_nav ban_nav_l move-nav" ></div>
			<div class="ban_mask ban_mask_l"></div>
			<div class="ban_logo ban_logo_l"></div>
		</div>
		<div class="ban_r" id="ban_r">
			<div class="ban_pic ban_pic_r move-con" >
				<?php if($bannerList_Right):?>
					<?php foreach ($bannerList_Right as $key => $value): ?>
						<div class="move-li" ><img src="<?=UPLOADURL.$value['banner_img']?>"></div>
					<?php endforeach;?>
				<?php endif;?>
			</div>
			<div class="ban_nav ban_nav_r move-nav"></div>
			<div class="ban_mask ban_mask_r"></div>
			<div class="ban_logo ban_logo_r"></div>
		</div>
	</div>
</div>
<div class="container" style="margin-top: 50px;">
    <div id="ri-grid" class="ri-grid animate-box">
		<img class="ri-loading-image" src="<?=STATICURL?>images/loading.gif"/>
		<ul>
		<?php for($i=1 ;$i<24;$i++) {?>
	        <li>
	          <a href="#">
	            <img style="opacity:0.4;" src="<?=STATICURL?>images/pic<?=$i?>.jpg"/>
	            <div class="desc">
	              <h3>Album<br></h3>
	            </div>
	          </a>
	        </li>
	    <?php }?>
		</ul>
	</div>
</div>
	<!--footer-->
	<?php require_once VIEWPATH.'Common/footer.php'; ?>
<!-- jQuery -->
<script type="text/javascript" src="<?=STATICURL?>js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="<?=STATICURL?>js/banner.js"></script>
<script type="text/javascript" src="<?=STATICURL?>js/bannerindex.js"></script>
<!-- Waypoints -->
<script src="<?=STATICURL?>js/other/jquery.waypoints.min.js"></script>
<!-- Counters -->
<script src="<?=STATICURL?>js/other/jquery.countTo.js"></script>
<!-- gridrotator -->
<script type="text/javascript" src="<?=STATICURL?>js/other/jquery.gridrotator.js"></script>
<!-- Magnific Popup -->
<script type="text/javascript" src="<?=STATICURL?>js/other/jquery.magnific-popup.min.js"></script>
<!-- Main JS (Do not remove) -->
<script src="<?=STATICURL?>js/other/main.js"></script>
<script type="text/javascript">	
	$(function() {
		$( '#ri-grid' ).gridrotator( {
			rows : 3,
			// number of columns 
			columns : 7,
			w1024 : { rows : 3, columns : 5 },
			w768 : {rows : 3,columns : 4 },
			w480 : {rows : 3,columns : 3 },
			w320 : {rows : 2,columns : 2 },
			w240 : {rows : 1,columns : 1 },
			preventClick : false
		} );
	});
	
</script>
